<script lang="ts">
import { Component, Vue } from 'vue-facing-decorator';
import TextEditor from '@/components/editor/TextEditor.vue';
import { createNovel } from '@/api/novel/novel';
import type { CreateNovelFormData } from '@/api/novel/novel';
import { ElMessage } from 'element-plus';

@Component({
  components: {
    TextEditor,
  },
})
export default class NovelCreatePage extends Vue {
  novel: CreateNovelFormData = {
    title: '',
    description: '',
  };

  async createNovel() {
    const resp = await createNovel(this.novel);
    if (resp.error != null) {
      ElMessage({ type: 'error', message: resp.error });
    } else {
      this.$router.replace('/novel/' + resp.data.id);
    }
  }
}
</script>
<template>
<div class="novel-create-page">
  <div class="novel-title">
    <el-input class="novel-title-input" placeholder="小说标题" v-model="novel.title" />
  </div>
  <div class="novel-description">
    <div class="novel-description-title">小说简介</div>
    <text-editor v-model="novel.description" />
  </div>
  <div class="action-buttons">
    <el-button type="primary" @click="createNovel">创建小说</el-button>
  </div>
</div>
</template>
<style scoped>
.novel-create-page {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px;
  background-color: var(--el-bg-color-overlay);
  color: var(--el-text-color-primary);
  display: flow-root;
}

.novel-title {
  margin-bottom: 20px;
}

.novel-title-input {
  font-size: 150%;
  height: 70px;
}

.novel-description {
  margin-bottom: 20px;
}

.novel-description-title {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 10px;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
}
</style>
